
<router-outlet></router-outlet>

<!--首页侧边导航栏-->
<div class="navbar">
  <div class="navbar-item" routerLink="/pipi/home" (click)="selectNavItem(0)" [ngClass]="{'active': activeNavItem === 0}">
    <div class="icon-size">
      <span class="iconfont icon-shouye"></span> 
    </div>
    <div class="font-size" >首页</div>
  </div>

  <div class="navbar-item" routerLink="/pipi/gallery" (click)="selectNavItem(1)"  [ngClass]="{'active': activeNavItem === 1}">
    <div class="icon-size">
      <span class="iconfont icon-tupian"></span>
    </div>
    <div class="font-size" >画廊</div>
  </div>

  <div class="navtitle" title="AI创作工具">
    <span>AI创作工具</span>
  </div>

  <div class="navbar-item" routerLink="/pipi/font_img" (click)="selectNavItem(2)" [ngClass]="{'active': activeNavItem === 2}">
    <div class="icon-size">
      <span class="iconfont icon-tupianbaohu"></span>
    </div>
    <div class="font-size" >文生图</div>
  </div>

  <div class="navbar-item" routerLink="/pipi/img_img" (click)="selectNavItem(3)" [ngClass]="{'active': activeNavItem === 3}">
    <div class="icon-size">
      <span class="iconfont icon-Photo"></span>
    </div>
    <div class="font-size" >图生图</div>
  </div>

  <div class="navbar-item" routerLink="/pipi/dictionary" (click)="selectNavItem(4)" [ngClass]="{'active': activeNavItem === 4}">
    <div class="icon-size">
      <span class="iconfont icon-cidianshangchuan"></span>
    </div>
    <div class="font-size">创作词库</div>
  </div>

  <div class="navtitle" title="模型训练">
    <span>模型训练</span>
  </div>

  <div class="navbar-item" (click)="showModal()">
    <div class="icon-size">
      <span class="iconfont icon-huaban"></span>
    </div>
    <div class="font-size" >风格模型</div>
  </div>
  
  <nz-modal 
    [(nzVisible)]="isVisible" 
    nzCentered   
    nzTitle=" " 
    (nzOnCancel)="handleCancel()"
    nzFooter=" "
    [nzStyle]="{'text-align': 'center'}"
    [nzWidth]='600'
  >
    <ng-container *nzModalContent>
      <div class="popup-title">即刻获取模型训练机会</div>
      <div class="popup-p">扫描二维码可加入官方用户群，将有机会体验 WHEE模型训练功能哦</div>
      <img class="erweima-img" src="./assets/images/2weima.png" alt="二维码">
    </ng-container>
  </nz-modal>

  <div class="navtitle" title="我的创作">
    <span>我的创作</span>
  </div>

  <div class="navbar-item" routerLink="/pipi/mymodule" (click)="selectNavItem(5)" [ngClass]="{'active': activeNavItem === 5}">
    <div class="icon-size">
      <span class="iconfont icon-sanweimoxing"></span>
    </div>
    <div class="font-size" >我的模型</div>
  </div>

  <div class="navbar-item">
    <div class="icon-size">
      <span class="iconfont icon-wenhao"></span>
    </div>
    <div class="font-size" >教程帮助</div>
  </div>

</div>

<!--首页顶部 网站logo,账号注册及登录-->
<div class="main-top">
  <div class="logo-content" routerLink="/pipi/home">
    <img src="#" alt="我是一个Logo">
    <span class="logo-name">PIPI</span>
  </div>

  <div class="login-box" title="登录/注册">
      <div class="iconfont icon-yonghu-yuan"></div>
  </div>
</div>